<template>
    <div id="contianer">
        <div class="screen_model">
          <el-row  style="padding-top: 10px">
      <el-button-group class="pull-right">
        <el-form :inline="true" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()"
          @submit.native.prevent>
          <el-form-item>
            <el-select v-model="searchForm.professionList" placeholder="请选择专业类型" clearable>
              <el-option v-for="(item, index) in professionList" :key="index" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchForm.typeList" placeholder="请选择文件类型" clearable>
              <el-option v-for="(item, index) in fileTypeList" :key="index" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="fileName">
            <el-input size="small" v-model.trim="searchForm.keyWords" placeholder="文件名称" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="refreshList()" size="small">查询</el-button>
            <el-button @click="resetSearch()" size="small">重置</el-button>
          </el-form-item>
        </el-form>
      </el-button-group>
    </el-row>
        </div>
        <el-table :data="dataList" style="width: 100%" row-key="id" stripe :max-height="tableClientHeight">
            <el-table-column label="排名" width="60px">
              <template slot-scope="scope">
                {{scope.$index + 1}}
              </template>
            </el-table-column>
            <el-table-column prop="fileName" label="文件名称" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="fileVersion" label="文件版次"> </el-table-column>
            <el-table-column prop="author" label="上传人员"> </el-table-column>
            <el-table-column prop="author" label="作者姓名"> </el-table-column>
            <el-table-column prop="uploadTime" label="上传日期" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="fileTypeName" label="文件类型" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="professionName" label="所属专业" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="fileFormat" label="文件格式" show-overflow-tooltip> </el-table-column>
            <el-table-column align="center" width="200" label="操作">
                <template slot-scope="scope">
                    <el-link
                        type="primary"
                        style="display: inline-block; margin-left: 10px"
                        @click="viewFn(scope.row)"
                        >查看</el-link
                    >
                    <el-link
                        type="danger"
                        style="display: inline-block; margin-left: 10px"
                        @click="cancelCollectionFn(scope.row.id)"
                        >取消收藏</el-link
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageNo"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="total"
            background
            layout="total, prev, pager, next, jumper"
        >
        </el-pagination>
        <!-- 预览 -->
        <preview ref="preview" v-if="previewFlag" @close="previewFlag = false"/>
    </div>
</template>
<script>
import { number } from 'echarts'
import preview from '../../../preview.vue'
export default {
  components:{
    preview
  },
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }
    return {
      batchImportVisible: false,
      professionList:[],
      fileTypeList: [],
      searchForm: {
        keyWords: "",
        typeList: "",
        professionList: "",
      },
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      total: 100,
      ruleForm: {},
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        userType: [
          { required: true, message: '请选择用户类型', trigger: 'change' }
        ],
        userName: [
          { required: true, message: '请输入用户名', trigger: 'change' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ]
      },
      previewFlag: false
    }
  },
  computed: {
    tableClientHeight() {
      let tableClientHeight = document.documentElement.clientHeight || document.body.clientHeight
      tableClientHeight = tableClientHeight - 279
      return tableClientHeight
    }
  },
  mounted(){
    this.fileTypeListFn();
    this.majorTypeListFn();
    this.refreshList();
  },
  methods: {
    fileTypeListFn() {
      this.$http({
        url: "/dict/file/list",
        method: "GET",
        params: {},
      }).then(({ data }) => {
        console.log(data.data.data);
        this.fileTypeList = data.data.data;
      });
    },
    majorTypeListFn() {
      this.$http({
        url: "/dict/major/list",
        method: "GET",
        params: {},
      }).then(({ data }) => {
        console.log(data.data.data);
        this.professionList = data.data.data;
      });
    },
    resetSearch() {
      this.searchForm.professionList = ''
      this.searchForm.typeList = ''
      this.searchForm.keyWords = ''
      this.refreshList();
    },
    refreshList(){
      this.$http({
        url:'/knowledgeCollect/list',
        method: 'GET',
        params:{
          ...this.searchForm,
          pageSize: this.pageSize,
          pageNumber: this.pageNo,
        }
      }).then((({ data }) => {
        console.log(data,'fff')
        this.dataList = data.data.data
        this.total =data.data.totalSize
      }))
    },
    viewFn(row) {
      if (row.fileType === 'folder') {
        this.$router.push({
          path: "/onlineTraining/details",
          query: {
            id: row.id,
            title: row.fileName
          },
        });
      } else {
        this.$http({
        url: '/knowledgeData/release/preview',
        method: 'get',
        params: {
          id: row.id
        }
      }).then(({data}) => {
        console.log('文件预览', data.data)
        if (data.data.readAuthority == false) {
          this.$message.warning(data.data.message)
          return
        } else {
          this.previewFlag = true
          this.$nextTick(() => {
            this.$refs.preview.initFn(row);
          })
        }
      })
      }
    },
    edit() {},
    // 收藏
    collectionFn(){
      this.$http({
        url:'/knowledgeCollect/add',
        method: 'GET',
        params:{
        }
      }).then(({data}) =>{

      })
    },
    // 取消收藏
    cancelCollectionFn(id){
      this.$http({
        url:'/knowledgeCollect/delete',
        method: 'post',
        data:{
          knowledgeFileId:id,
          collectType:2
        }
      }).then(({data}) =>{
          this.$message.success("取消收藏成功")
          this.refreshList();
      })
    },
    quitCollection() {},
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNo = 1
      this.refreshList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val
      this.refreshList()
    }
  }
}
</script>
<style lang='scss' scoped>
#contianer {
    width: 98%;
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin: 1%;
    float: left;
    .screen_model {
        margin-bottom: 20px;
    }

    .el-select {
        width: 100%;
    }
}
</style>
